<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
			<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
		<!--
        	作者：zyl
        	时间：2017-05-25
        	描述：Canvas 对象
        	context.arc()
        	定义和用法
				arc() 方法创建弧/曲线（用于创建圆或部分圆）。
				提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
				提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
				
				中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
				起始角：arc(100,75,50,0,1.5*Math.PI)
				结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
				
			JavaScript 语法：
				context.arc(x,y,r,sAngle,eAngle,counterclockwise);
				参数值        参数	描述
				                            
				x	        圆的中心的 x 坐标。
				y	        圆的中心的 y 坐标。
				r	          圆的半径。
				sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
				eAngle	结束角，以弧度计。
				counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。	
        -->
	</body>
	<script>
			var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	        context.lineWidth=5;
	        context.strokeStyle ="#005588";
	        
	        for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
	        	
	        	context.stroke();
	        }
		  for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
	        	context.closePath();//关闭
	        	context.stroke();
	        }
		   for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
	        	context.closePath();//关闭
	        	context.stroke();
	        }
		     for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
	        
	        	context.stroke();
	        }
		     context.fillStyle="#005588";
		       for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10);
	        context.closePath();
	        	context.fill();
	        }
		        context.fillStyle="#005588";
		       for(var i=0;i<10;i++){
	        	context.beginPath();
	        	context.arc(50+i*100,660,40,0,2*Math.PI*(i+1)/10,true);
	        
	        	context.fill();
	        }
	</script>
</html>
